@font-face
{
    font-family: myCodeFont;
    src: url('../font/SourceCodePro-Medium.ttf');
} 
* {
    padding: 0 ;
    margin: 0 ;
}
html::-webkit-scrollbar {
    display: none; /* Chrome Safari */
}
html {
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
}
body {
    position: relative ;
    //background: #3c40c6;
    background-color: rgb(45, 52, 54) ;
    color: #fff;
    width: 100%;
    float: left;
    display: block;
    font-family: "myCodeFont";
    background-image: url("../img/stars.svg");
    width: 100vw ;
    max-width: 100vw ;
    min-height: 100vh ;
    display: flex ;
    flex-direction: column ;
    justify-content: flex-start ;
    align-items: flex-start ;
    .title-head {
        position: relative ;
        font-size: 24px;
        color: #fff;
        margin-top: 30px ;
        margin-left: 30px ;
        /* left: 10px;
        top: 10px; */
        height: auto ;
        letter-spacing: 2.5px;
        font-weight: 300;
        text-shadow: 0 1px,1px 0,1px 1px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        transition: all .2s;
        -webkit-transform-origin: 0 50%;
        transform-origin: 0 50%;
        display: block; 
        box-sizing: border-box; 
        cursor: pointer;
        &:hover {
            transform: scaleX(0.95) ;
        }
    }
    .color-box {
        position: relative ;
        background: transparent ;
        margin-top: 50px ;
        padding-left: 30px ;
        padding-right: 30px ;
        display: flex ;
        flex-direction: row ;
        justify-content: center ;
        align-items: flex-start ;
        flex-wrap: wrap ;
        text-decoration: none ;
        font-family: "myCodeFont";
        width: 100vw ;
        max-width: 100vw ;
        box-sizing: border-box;
        a.select-card {
            position: relative ;
            flex: 0 auto ;
            width: 250px ;
            height: 180px ;
            box-sizing: border-box;
            display: flex ;
            flex-direction: column ;
            justify-content: flex-start ;
            align-items: center ; 
            background-color: white ;
            padding-top: 10px ;
            border-radius: 5px ;
            margin-left: 20px ;
            margin-right: 20px ;
            margin-top: 20px ;
            cursor: pointer ; 
            box-shadow: 0 0 10px #2d3436 ;
            .color-preview{
                position: relative ;
                /* flex: 0 auto ;
                width: calc(100% ~"-" 40px) ;
                height: calc(100% ~"-" 80px) ; */
                width: calc(100% ~"-" 20px) ; ;
                flex:1 ;
                border-radius: 5px ;
                box-sizing: border-box;
                display: flex ;
                flex-direction: row ;
                justify-content: flex-start ;
                align-items: flex-start ;
                flex-wrap: wrap ;
                overflow: hidden ;
                .color {
                    position: relative ;
                    flex: 0 auto ;
                    width: 20%;
                    height: 25%;
                }
            }
            .footer-box {
                position: relative ;
                min-height: 30px ;
                width: 100% ;
                h2.discri {
                    position: absolute ;
                    display: inline-block ;
                    color: #2d3436 ;
                    font-size: 14px ;
                    min-width: 50% ;
                    left: 20px ;
                    bottom: 0px ;
                    line-height: 30px ;
                    user-select: none ;
                    text-align: right ;
                    animation-name: h2Remove5s ;
                    animation-duration: 2s ;
                    animation-play-state: paused ;
                    animation-iteration-count: infinite ;
                    animation-direction: alternate ;
                }
                @keyframes h2Remove5s {
                    0% {
                        width: 60% ;
                    }
                    100% {
                        width: 80% ;
                    }
                }
            }
            &:hover .footer-box>h2.discri{
                animation-play-state: running ;
            }
        }
    }
}